<template>
	<view class="content">
		<u-sticky bgColor="#fff">
			<view class="nav">
				<u-tabs :list="tablist" lineWidth="30" lineColor="#23BF61" @click="clicknav" :activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" :inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				</u-tabs>
			</view>
		</u-sticky>
		<view class="pd3">
			<scroll-view scroll-y="true" @scrolltolower="lowerBottom" style="height:85vh;">
				<view class="item" v-for="(item, index) in list" @click="orderdetail(item.status)">
					<view class="num">订单号：{{ item.ordernum }} <text>{{ item.statusstr }}</text> </view>
					<view class="info">
						<view class="title">{{ item.detail.dpcinfo.title }}</view>
						<text>洗衣机码：{{ item.dpnum }}</text>
						<text>洗衣时间：{{ item.detail.start }} - {{ item.detail.end }}</text>
						<text>洗衣机地址：{{ item.detail.dpcinfo.address }}</text>
					</view>
					<view class="boot">
						<view class="time">时长：{{ item.times }}（小时）</view>
						<view class="price">订单金额：<text>￥{{ item.price }}</text></view>
					</view>
				</view>
				<view class="medicine_title">
					{{ isBottom ? '没有更多数据了～' : '下拉加载更多' }}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
let that
import {
	mapState,
	mapActions
} from 'vuex'
export default {
	data() {
		return {
			tablist: [{
				name: '全部',
			}, {
				name: '洗衣中',
			}, {
				name: '已结束'
			}],
			type: 0,//1:正在洗 2:已结束
			list: [
				{
					ordernum: '20240612123456',
					status: 'charging',
					statusstr: '洗衣中',
					times: '1.5',
					price: '15.00',
					dpnum: '1001',
					detail: {
						dpcinfo: {
							title: '测试洗衣机',
							address: '北京市海淀区',
						},
						start: '2024-06-12 12:00:00',
						end: '2024-06-12 13:30:00',
					},
				},
				{
					ordernum: '20240612123457',
					status: 'charged',
					statusstr: '已结束',
					times: '2.5',
					price: '25.00',
					dpnum: '1002',
					detail: {
						dpcinfo: {
							title: '测试洗衣机2',
							address: '北京市海淀区',
						},
						start: '2024-06-12 14:00:00',
						end: '2024-06-12 16:30:00',
					},
				}
			],
			currentpage: 1, //当前页码
			isBottom: false, //是否请求完毕数据
		}
	},
	onLoad() {
		this.listinit()
	},
	onShow() {

	},
	computed: {
		//引入store全局变量
		...mapState(['loginState', 'userInfo'])
	},
	mounted() {
		that = this
	},
	methods: {
		//数据初始化配置
		listinit() {
			this.isBottom = false
			// this.getlist(this.type)
		},
		//订单列表
		// getlist() {
		// 	this.$http_api.dpcorder({
		// 		uid: this.userInfo.id,
		// 		type: this.type,
		// 		page: this.currentpage
		// 	}).then((res) => {
		// 		that.list = that.list.concat(res)
		// 		if (res.length == 0 || res.length < 10) {
		// 			that.isBottom = true
		// 		}
		// 	})
		// },
		// 滚到底部
		lowerBottom() {
			if (!this.isBottom) {
				this.currentpage += 1
				this.getlist(this.type)
			}
		},
		//订单详情
		orderdetail(status) {
			// if (status == 'charging') {
				uni.navigateTo({
					url: '/pages/order/order-detail'
				})
			// } else {
			// 	this.$u.toast('该订单已结束')
			// }

		},
		//切换导航
		clicknav(item) {
			this.currentpage = 1
			this.isBottom = false
			// this.list = []
			this.type = item.index
			// this.getlist(this.type)
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	background: #f5f5f5;
	padding-top: 0;

	.nav {
		margin-bottom: 30rpx;
		padding: 20rpx 0;
	}

	.pd3 {
		width: 100%;
		padding: 0 3%;
		box-sizing: border-box;
	}

	.item {
		background: #fff;
		padding: 35rpx;
		margin-bottom: 40rpx;
		border-radius: 10rpx;

		.num {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 30rpx;
			padding-bottom: 24rpx;
			border-bottom: 1px dashed #dfdfdf;

			text {
				float: right;
				padding: 6rpx 20rpx;
				background: #23BF61;
				color: #fff;
				font-size: 24rpx;
				border-radius: 40rpx;
			}
		}

		.info {
			// background: url("../../static/cd.png") no-repeat right;
			background-size: 28px;
			background-position-y: 0;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			text {
				font-size: 28rpx;
				display: block;
				color: #666;
				margin-top: 10rpx;
			}
		}

		.boot {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #666;

			.price {
				text {
					color: #23BF61;
				}
			}
		}
	}

	.medicine_title {
		font-size: 28rpx;
		color: #999;
		text-align: center;
		margin: 60rpx 0;
	}
}
</style>